import { _decorator, Component, Node, Button, Label, v3, Vec3 } from 'cc';
import { BasePanel } from '../../../../scripts/libs/ui/BasePanel';
import { IapButtonItem } from '../ShopPanel/IapButtonItem';
import { BindButton } from '../../../../scripts/libs/rxjs/cc3/BindButton';
import { ReactiveProperty } from '../../../../scripts/libs/rxjs/cc3/ReactiveProperty';
import { IapProductInfo } from '../../../../scripts/managers/SDK/IapSDKManager';
import { find } from 'cc';
import { MSResolve, MSRToString_th_m } from '../../../../scripts/libs/utils/date';
import { lm } from '../../LobbyManager';
import { gm } from '../../../../scripts/managers/GameManager';
import { nc } from '../../../../scripts/libs/rxjs/NotificationCenter';
import { GiftPackOpenPanel } from '../GiftPackOpenPanel/GiftPackOpenPanel';
import { forkJoin, Observable } from 'rxjs';
import { TweenToStart } from '../../../../scripts/libs/rxjs/cc3/TweenStart';
const { ccclass, property } = _decorator;

@ccclass('StarterPackPanel')
export class StarterPackPanel extends BasePanel {

    data = ReactiveProperty.Create<IapProductInfo>(null);

    @property(Node)
    mainNode: Node = null;

    @property(Node)
    layoutNode: Node = null;

    @property(Button)
    closeButton: Button = null;

    @property(IapButtonItem)
    buyIapButtonItem: IapButtonItem = null;

    willBind(): void {
        // this.adaptive();
        this.mainNode.setScale(.5, .5, .5);
    }

    _coinValueReward = 0;

    useObserves() {
        return [
            BindButton(this.closeButton).subscribe(this.closeButtonClicked.bind(this)),
            this.data.subscribe(this.refresh.bind(this)),

            this.buyIapButtonItem.beforeProvideCommand.subscribe(_ => {
                gm.coinAnimatingFlags.add('iap_coin');
            }),
            this.buyIapButtonItem.successCommand.subscribe(_ => {
                StarterPackPanel.CloseProcess(null, 'purchased');

                GiftPackOpenPanel.StartProcess((panel: GiftPackOpenPanel) => {
                    panel.key.value = this.data.value.flag;
                }).subscribe(_ => {
                    gm.coinAnimatingFlags.delete('iap_coin');
                });

            }),
        ];
    }

    // adaptive() {
    //     this.mainNode.setScale(v3(Vec3.ONE).multiplyScalar(lm.getAdaptiveScale()));
    // }

    openPanelAnim(): Observable<any> {
        return forkJoin([
            TweenToStart(this.ensureUIOpacity(), .2, { opacity: 255 }, { easing: 'expoOut' }),
            TweenToStart(this.mainNode, .4, { scale: lm.getAdaptiveScaleV3() }, { easing: 'backOut' }),
        ]);
    }

    closePanelAnim(): Observable<any> {
        this.ensureUIOpacity();
        return forkJoin([
            TweenToStart(this.ensureUIOpacity(), .2, { opacity: 0 }, { easing: 'expoIn' }),
            TweenToStart(this.mainNode, .2, { scale: v3(.5, .5, .5) }, { easing: 'backIn' }),
        ]);
    }

    closeButtonClicked() {
        StarterPackPanel.CloseProcess(null, 'close');
    }

    refresh() {
        if (this.data.value == null) return;
        this.buyIapButtonItem.data.value = this.data.value;

        let info = this.data.value;
        let coinLabel = find('main/board/coin/label', this.node).getComponent(Label);
        coinLabel.string = `x${info.provide.coin ?? 0}`;

        for (let i = 0; i < this.layoutNode.children.length; i++) {
            let itemNode = this.layoutNode.children[i];
            if (info.provide[itemNode.name] > 0) {
                itemNode.active = true;
                let valueLabelNode = find('label', itemNode);
                if (valueLabelNode != null) {
                    if (['inf_heart_sec', 'noads_sec'].includes(itemNode.name)) {
                        let msr = MSResolve(info.provide[itemNode.name] * 1000);
                        valueLabelNode.getComponent(Label).string = MSRToString_th_m(msr);
                    } else {
                        valueLabelNode.getComponent(Label).string = `x${info.provide[itemNode.name] ?? 0}`;
                    }
                }
            } else {
                itemNode.active = false;
            }
        }
    }

}

